import React, {PureComponent} from "react";

class SystemMenuComponent extends PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            mouseIndex: -1,
        };

        this.mouseHover = this.mouseHover.bind(this);
        this.clickMethod=this.clickMethod.bind(this);
    }

    render() {

        return (
            <div style={systemTypeWrapper}>
                <div style={systemTypeTitleStyle}>{this.props.title}</div>
                <ul style={systemTypeUlStyle}>
                    {
                        this.props.data.map((item,index) => {
                            let liStyle;
                            //是否被点击
                            if (index === this.props.index){
                                liStyle =  {...systemTypeLiStyle, ...systemTypeLiChoiceStyle};
                            }else {
                                liStyle = this.state.mouseIndex === index ? {...systemTypeLiStyle, ...systemTypeLiOverStyle} : systemTypeLiStyle;
                            }

                            return (
                                <li
                                    key={item.get("id")}
                                    style={liStyle}
                                    onMouseEnter={
                                        () => {
                                            this.mouseHover(index,true);
                                        }
                                    }
                                    onMouseLeave={
                                        () => {
                                            this.mouseHover(index, false);
                                        }
                                    }
                                    onClick={
                                        ()=>{
                                           this.clickMethod(index);
                                        }
                                    }
                                >{item.get("name")}</li>);
                        })
                    }
                </ul>
            </div>
        );
    }

    //bool  true 进去, false 出去
    mouseHover(key, bool) {
        let currentIndex = -1;
        if (bool) {
            currentIndex = key;
        }
        this.setState((state) => ({
            mouseIndex: currentIndex,
        }))
    }

    //点击了第几个
    clickMethod(index){
        //一级目录
        if (this.props.discriminateTag){
            this.props.clickFirstMethod(index);
        } else {
            //二级目录
            this.props.clickSecondMethod(index);
        }
    }

}

export default SystemMenuComponent;



const systemTypeWrapper = {
    width: 1200,
    margin: "0 auto",
    overflow: "hidden",
};

const systemTypeTitleStyle = {
    color: "#fff",
    fontSize: 14,
    width: 72,
    float: "left",
    marginTop: 20,
};
//务必设置宽度,否则li浮动位置出现错误
const systemTypeUlStyle = {
    display: "block",
    width: 1100,
    float: "left",
    marginTop: 15,
};

const systemTypeLiStyle = {
    float: "left",
    display: "block",
    marginRight: 10,
    marginBottom: 12,
    padding: "4px",
    textAlign: "center",
    color: "#fff",
    fontSize: 14,
    cursor: "pointer",
    boxSizing: "border-box",
    border: "solid 1px #1F77BB",
    borderRadius: 4,
};


const systemTypeLiOverStyle = {
    textDecoration: "underline",
};

const systemTypeLiChoiceStyle = {
    border: "solid 1px #fff",
};
